import classNames from 'classnames';
import React from 'react'

export interface Props {
  icon: React.ElementType
  // 前后
  type?: 'before' | 'after'
  children?: React.ReactNode
  className?: string
  size?: 'small' | 'middle' | 'larger'
}
const Icon = ({ icon: IconComponent, className, children, type = 'before', size = 'middle' }: Props) => {
  return <div className='flex items-center gap-txt-gap-x md:gap-txt-gap-x-md'>
    <IconComponent className={classNames('text-bg-gray', {
      'order-1': type === 'before',
      'order-3': type === 'after',
      'w-[14px] h-[14px] md:w-[16px] md:h-[16px]': size === 'small',
      'w-[18px] h-[18px] md:w-[22px] md:h-[22px]': size === 'middle',
    }, className)} />
    {children && <span className={classNames('order-2', className)}>{children}</span>}
  </div>;
};

export default Icon;